<template>
  <div class="contain">
    <div class="top-flex">
      <div class="left">
        <div class="title">{{ contain.title }}</div>
        <div class="time">{{ contain.createTime }}</div>
        <div class="line"></div>
        <div class="article" v-html="contain.content"></div>
      </div>  
      <div class="right">
            <div class="right-title">
              <span class="moreTle">最新政策</span>
              <span class="moreBth">更多</span>
            </div>
            <div class="news" v-for="item in compLists" :key="item.id">
                <div class="news-img"><img :src="item.img" alt=""></div>
                <div class="news-title">{{ item.title }}</div>
                <div class="news-text">{{ item.introduce }}</div>
                <div class="news-time">
                  <div class="time-left">{{ item.publishTime }}</div>
                  <div class="rh-img" @click="copyData(item)"><el-icon><Right /></el-icon></div>
                </div>
              </div>
            <div class="hot">
                <div class="hot-item" v-for="item in hots" :key="item.id">
                  <span class="hot-num">{{ item.num }}</span>
                  <span class="hot-text">{{ item.text }}</span>
                </div>
            </div>
      </div> 
    </div>
    <div class="bottom-msg">
        <div class="banquan">果园农业种植数据管理平台 版权所有</div>
        <div class="tips"><span>使用前必读</span><span>帮助中心</span><span>京公网安备xxxxxxx号</span></div>
        <div class="compeny">互联网农业信息服务资格证书 (京)-经营性-2017-0020  ｜  信息网络传播视听节目许可证 xxxx  ｜  技术支持：原链科技</div>
    </div>
  </div>
   
</template>

<script setup>
import {getContentList} from '../../util/api.js'
const hots=ref([
  {
    num:1,
    text:"杭州亚运会金牌观赛日历 快收藏！杭州亚运会金牌观赛日历",
    id:0
  },
  {
    num:2,
    text:"绝食第19天 李在明健康恶化被送医",
    id:1
  },
  {
    num:3,
    text:"九一八事变爆发92周年",
    id:2
  },
  {
    num:4,
    text:"中国市场是“必选项”",
    id:3
  },
  {
    num:5,
    text:"男子被杠铃压死 老板：杠铃他买的",
    id:4
  },
  {
    num:6,
    text:"电池入户充电致骑手死亡 平台被约谈",
    id:5
  },{
    num:7,
    text:"lisa演唱会现场捂嘴哭泣",
    id:6
  }
  ,{
    num:8,
    text:"韩国检方申请拘捕李在明！",
    id:7
  }
  ,{
    num:9,
    text:"房地产税立法暂缓",
    id:8
  }
])
const compLists = ref([])
const compInfoNohot = ref({
    type:"",
    state:2,
    page:1,
    hotspot:false,
    pageNum: 2,
    pageType: 1
})
const router = useRouter()
const route = useRoute()
const contain = ref({})
 //查询非热点文章
        const findCompNohot = async()=>{
            let res= await getContentList(compInfoNohot.value)
            console.log('非热点文章：',res)
            if(res.code!=200)return
            compLists.value=res.data.content
}
onMounted(()=>{ 
   contain.value =  JSON.parse(decodeURIComponent(route.query.data))

    compInfoNohot.value.type =  contain.value.type
     findCompNohot()
    
})
const copyData=(row)=>{
  //  console.log(row)
   contain.value = row
}
</script>

<style lang="scss" scoped>
.contain{
  width: 100%;
  
  .top-flex{
    width: 100%;
    padding: 49px 148px 85px 310px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .left{
      width: 1057px;
      .title{
        font-size: 40px;
        font-weight: 500;
        color: #323232;
        line-height: 69px;
      }
      .time{
        margin-top:49px;
        font-size: 18px;
        font-weight: 400;
        color: #666666;
        line-height: 18px;
      }
      .line{
        margin: 49px 0;
        height: 2px;
        width: 100%;
        background-color: rgba(0,0,0,0.1);
      }
      .article{
        width: 100%;
      }
    }
    .right{
      width: 308px;
      .right-title{
         width: 100%;
         box-sizing: border-box;
         padding-top: 82px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         .moreTle{
          font-weight: 500;
          color: #323232;
          // line-height: 22px;
          font-size: 22px;
         }
         .moreBth{
          font-weight: 400;
          font-size: 18px;
          color: #52B870;
          // line-height: 18px;
          cursor: pointer;
         }
      }
      .news{
        width: 100%;
        margin-top: 36px;       
        .news-img{
          width: 100%;
          padding: 10px;
          border: 1px solid #DCDCDC;
          box-sizing: border-box;
          img{
           width: 100%;
          }
        }
        .news-title{
          width: 100%;
          margin-top: 18px;
          font-size: 22px;
          font-weight: 500;
          color: #323232;
          // line-height: 22px;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1; /* 这里是超出几行省略 */
          overflow: hidden;
        }
        .news-text{
          text-indent: 72px;
          width: 100%;
          margin: 25px 0;
          padding-left: 10px;
          box-sizing: border-box;
          font-size: 18px;
          font-weight: 400;
          color: #666666;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; /* 这里是超出几行省略 */
          overflow: hidden;
        }
        .news-time{
          width: 100%;
          display: flex;
          align-items: center;
          .time-left{
            flex: 1;
            height: 38px;
            border-bottom: 1px solid #DCDCDC;
            font-size: 16px;
            font-weight: 400;
            color: #9A9A9A;
            // line-height: 38px;
          }
          .rh-img{
            width: 38px;
            height: 38px;
            border-radius: 50%;
            overflow: hidden;
            color: #FFFFFF;
            background-color: #52B870;
            box-sizing: border-box;
            line-height: 43px;
            text-align: center;
            font-size: 22px;
            cursor: pointer;
          }
        }
      }
      .hot{
        width: 100%;
        margin-top: 18px;
        
        .hot-item{
          width: 100%;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1; /* 这里是超出几行省略 */
          overflow: hidden;
          margin-bottom: 30px;
          cursor: pointer;
          .hot-num{
            font-size: 20px;
            font-weight: 500;
            color: #9599A6;
            line-height: 20px;
            padding-right: 10px;
          } 
          .hot-text{
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 18px;
          }
        }
        .hot-item:nth-child(1) .hot-num{
          color: #F73131;
        }
        .hot-item:nth-child(2) .hot-num{
          color: #F96F18;
        }
        .hot-item:nth-child(3) .hot-num{
          color: #FAA90E;
        }
      }
    }
  }
  .bottom-msg{
        width: 100%;
        padding: 0 10%;
        padding: 64px 148px 66px 310px;
        background-color: #F8F8F8;
        .banquan{
            width: 416px;
            background: #52B870;
            border-radius: 30px;
            font-weight: 600;
            font-size: 22px;
            text-align: center;
            line-height: 60px;
            color: #FFFFFF;
        }
        .tips{
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #323232;
            margin: 30px 0;
            span{
                margin-right: 60px;
            }
        }
        .compeny{
            font-size: 18px;
            font-weight: 400;
            color: #666666;
            padding-bottom: 60px;
        }
    } 
}
</style>
<style src="../phone/sisDetail.css" scoped></style>
